<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Like-喜欢鲜花平台！让鲜花从农户到用户一步到位 </title>
		<meta name="keywords" content="喜欢婚礼,婚礼学堂,嘉田美合,婚礼图片,婚礼视频,婚礼VR,婚礼,婚庆" />
		<meta name="description" content="喜欢婚礼平台,以婚礼机构为切入点，以婚礼用花为切入口，整合线下婚礼资源,鲜花,婚礼用品,舞美,人员等" />
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta http-equiv="X-UA-Compatible" content="IE=edge chrome=1" />
		<meta name="renderer" content="webkit">
		<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
		<link rel="stylesheet" type="text/css" href="../../statics/css/cssinit.css" />
		<style type="text/css">
			/*header*/
			
			.header {
				width: 100%;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50px;
				padding: 0 15px;
				box-sizing: border-box;
				background-color: #f5f5f5;
				box-shadow: inset 0px -1px 1px -1px #969696;
			}
			
			.header #backIcon {
				width: 46.5px;
			}
			
			.header .backIcon {
				width: 10px;
				height: 10px;
				/*border: 2px solid #d9b96e;*/
				border: 2px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(-135deg);
				-ms-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-webkit-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
			}
			
			.header .content {
				font-size: 18px;
				color: black;
			}
			
			.header .custom img {
				width: 17.5px;
				height: 17.5px;
				padding-right: 5px;
			}
			
			.main {
				width: 100%;
				text-align: center;
			}
			
			.main .top {
				margin: 0px 0 49px;
				width: 100%;
				box-sizing: border-box;
				padding: 0 25px;
			}
			
			.main .top div {
				height: 50px;
				line-height: 50px;
				border-bottom: 1px solid #d6d6d6;
				text-align: left;
				background: white!important;
				box-sizing: border-box;
			}
			
			.main .top div img {
				width: 15px;
				padding-right: 20px;
			}
			
			.main .top input {
				height: 30px;
				line-height: 30px;
				width: calc(100% - 35px);
			}
			
			input:-webkit-autofill {
				-webkit-box-shadow: 0 0 0px 49px white inset;
			}
			
			input,
			select {
				font-size: 15px;
			}
			
			.main .bottom {
				width: 100%;
				padding: 0 25px;
				box-sizing: border-box;
			}
			
			.main .bottom input {
				width: 100%;
				color: white;
				background: #bdbdbd;
				height: 43px;
				line-height: 43px;
				text-align: center;
				border-radius: 15px;
			}
			
			.main .bottom .blue {
				background: #66bcd5;
			}
			
			.main .regist .sides {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			
			.main .regist .rank .icon {
				width: 8px;
				height: 8px;
				border: 1px solid #969696;
				border-bottom: none;
				border-left: none;
				transform: rotate(135deg);
				-ms-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-webkit-transform: rotate(135deg);
				-o-transform: rotate(135deg);
			}
			
			.main .regist .rank select {
				height: 30px;
				line-height: 30px;
				width: calc(100% - 55px);
				border: none;
				appearance: none;
				-moz-appearance: none;
				-webkit-appearance: none;
			}
			
			#getCode {
				width: 80px;
				border-left: 1px solid #D6D6D6;
				padding-left: 8px;
				box-sizing: content-box;
				background-color: white;
				color: #ffbf03;
				border-radius：0px;
				-webkit-border-radius: 0px;
			}
			
			input[type="button"],
			input[type="submit"],
			input[type="reset"] {
				-webkit-appearance: none;
			}
			
			textarea {
				-webkit-appearance: none;
			}
			
			.TS {
				width: 100%;
				height: 40px;
				text-align: center;
				line-height: 40px;
				color: white;
				opacity: 0;
				transition: all 0.4s;
				-webkit-transition: all 0.4s;
				font-size: 14px;
				background-color: rgba(255, 71, 31, .65);
				position: fixed;
				top: 50px;
				z-index: 999;
			}
			.remind{
				color: #66bcd5;
			}
		</style>
	</head>

	<body>
		<header class="header">
			<div id="backIcon">
				<div class="backIcon"></div>
			</div>
			<div class="content">重置密码</div>
			<div class="custom"><span><img src="../../statics/images/cityPartner/custom.png" alt="客服"/>客服</span></div>
		</header>
		<div class="main">
			<div class="TS">请输入正确的手机号</div>
			<div class="regist">
				<div class="top">
					<div class="remind">
						（请输入以字母开头的6-16位密码）
					</div>
					<div class="phone">
						<div class="sides">
							<div><img src="../../statics/images/cityPartner/login/phone.png" /><input autocomplete="off" type="number" name="" id="registphone" value="" placeholder="请输入手机号" style="width:60%;" /></div>
							<input type="button" name="" id="getCode" value="获取验证码" style="" />
						</div>
					</div>
					<div>
						<img src="../../statics/images/cityPartner/login/newCode.png" /><input autocomplete="off" type="text" name="" id="registword" value="" placeholder="请输入验证码" />
					</div>
					<div>
						<img src="../../statics/images/cityPartner/login/password.png" /><input autocomplete="off" type="password" name="" id="registpassword" value="" placeholder="请输入新密码" />
					</div>
					<div>
						<img src="../../statics/images/cityPartner/login/password.png" /><input autocomplete="off" type="password" name="" id="resetpassword" value="" placeholder="请再次输入新密码" />
					</div>

				</div>
				<div class="bottom">
					<input type="button" name="" id="regist" value="提交" disabled="true" />
				</div>
			</div>

		</div>
		</div>
	</body>
	<script src="../../statics/js/jquery-1.12.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/js/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../statics/bowersrc/fastclick.js" type="application/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function() {
			new FastClick(document.body);
		})
	</script>
	<script type="text/javascript">
		$(".custom").on("click", function() {
			window.location.href = "../../views/service.html";
		})
		$("#backIcon").on("click", function() {
			window.history.back(-1)
		})
		$("#registphone").on("blur", function(e) {
			e.preventDefault();
			if(!checkPhone($("#registphone").val())) {
				info("请输入正确的手机号", 0);
			}
		});
		$("#registpassword").on("blur", function(e) {
			e.preventDefault();
			if(!checkpassword($("#registpassword").val())) {
				info("请输入以字母开头的6-16位密码", 0);
			}
		})
		$("#resetpassword").on("blur", function(e) {
			e.preventDefault();
			if($("#registpassword").val() !== $("#resetpassword").val()) {
				info("俩次密码不一致", 0);
			}
		})
		$("#registword").on("blur", function(e) {
			e.preventDefault();
			if(!checkWord($("#registword").val())) {
				info("请输入正确的 验证码", 0);
			}
		})

		$("#regist").on("click", function() {
			$.ajax({
				url: pathName + "/api/v1/member/register",
				type: "POST",
				dataType: "json",
				headers: {
//					 "Content-Type":"application/json"
				},
				data: {
					"phone": $("#registphone").val(),
					"code": $("#registword").val(),
					"password": $("#registpassword").val()

				},
				success: function(obj) {
					info("更改密码成功", 1);
					setTimeout(function() {
						window.location.href="LoginRegister.html";

					}, 2500);
				},
				error: function(data) {
					info("重置密码失败", 0)
				}
			})

		})

		function checkPhone(phone) {
			if(!(/^1(3|4|5|7|8)\d{9}$/.test(phone))) {
				return false;
			} else {
				return true;
			}
		}

		function checkpassword(passWord) {
			if(!(/^[a-zA-Z]\w{5,17}$/.test(passWord))) {
				return false;
			} else {
				return true;
			}
		}

		function checkWord(word) {
			if(!(/^\d{4}$/.test(word))) {
				return false;
			} else {
				return true;
			}
		}

		function info(message, status) {
			var ts = document.querySelector('.TS');
			switch(status) {
				case 0:
					ts.style = '';
					break;
				case 1:
					ts.style.backgroundColor = 'rgba(19,198,191,.8)';
					break;
				default:
					break;
			}
			ts.innerHTML = message;
			ts.style.opacity = 1;
			$(".remind").css("visibility","hidden");
			setTimeout(function() {
				ts.style.opacity = 0;
				$(".remind").css("visibility","visible");
			}, 2000)
		}

		$(function() {
			checkregist("#registphone");
			checkregist("#registpassword");
			checkregist("#registword");
			checkregist("#resetpassword");

			function checkregist(value) {
				$(value).bind('input porpertychange', function() {
					if(checkPhone($("#registphone").val()) && checkpassword($("#registpassword").val()) && checkWord($("#registword").val()) && $("#registpassword").val() == $("#resetpassword").val()) {
						$("#regist").addClass("blue");
						$("#regist").removeAttr("disabled");

					} else {
						$("#regist").removeClass("blue");
						$("#regist").attr("disabled", "disabled");
					}
				});
			}
			var timer;
			var orClick = true;
			//提示信息
			var em = document.querySelector("#getCode");
			$("#getCode").on("click", function() {
				getCode($("#registphone").val(), em);
			})

			function getCode(phoneNumber, em) {
				if(orClick == true) {
					console.log(orClick)
					orClick = false;
					if(checkPhone(phoneNumber)) {
						var djs = 60;
						em.value = djs;
						timer = setInterval(function() {
							djs--;
							em.value = djs;
							if(djs <= 0) {
								clearInterval(timer);
								orClick = true;
								emInfo("重新发送");
							}
						}, 1000);
						reqYzm(phoneNumber);
					} else {
						info("手机号码格式不正确");
						orClick = true;
					}
				}

			}

			function emInfo(msg) {
				em.style.background = '';
				em.value = msg;
			}
			//请求验证码
			function reqYzm(phoneNum) {
				$.ajax({
					url: pathName + "/api/v1/member/sendSms",
					type: "POST",
					dataType: "json",
					header: {
						"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8;application/json"
					},
					data: {
						"phone": phoneNum,
						"phrase": ''
					},
					success: function(obj) {
						//var obj = JSON.parse(data);
						console.log(obj);
						if(obj.status == 406) {
							orClick = true;
							ts.style.backgroundColor = '';
							ts.innerHTML = obj.error;
							ts.style.opacity = 1;
							setTimeout(function() {
								ts.style.opacity = 0;
							}, 1000);
							em.style.background = '';
							em.innerHTML = "获取验证码";
							clearInterval(timer);
						} else {
							info("已经发送验证码", 1);
						}
					},
					error: function(data) {
						console.log(data);
						var obj = JSON.parse(data.responseText);
						orClick = true;
						if(obj.code == 20008) {
							clearInterval(timer);
							em.innerHTML = "获取验证码";
							em.style.background = "";
							info("该用户已注册", 0);
						} else if(obj.code == 20010) {
							clearInterval(timer);
							em.innerHTML = "获取验证码";
							em.style.background = "";
							info("验证码发送失败", 0);
						} else if(obj.code == 20040) {
							em.style.background = "";
							clearInterval(timer);
						}
					}
				})
			}

		});
	</script>

</html>